﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>plugin\datepicker</title>
<link href="/css/shangjia-ued.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="/js/lib/jquery.js"></script>
<script type="text/javascript" src="jquery.boxy.js"></script>
<script type="text/javascript">
$(function(){
    $(".boxy").boxy();
    
    $("#alert").click(function() {
        Boxy.alert("文件未找到", null, {title: "提示信息"});
        return false;
    });
    $("#confirm").click(function() {
        Boxy.confirm("请确认:", function() { alert("已经确认!"); }, {title: "提示信息"});
        return false;
    });
    
    $('#curElement').click(function(){
        var b = new Boxy($("#boxyConfirm").html());
        return false;
    });
    
    $('#boxyLoad').click(function(){
        Boxy.load("test.html",{cache:false});
        return false;
    });
    
});
</script>
</head>
<body>
<br /><br />
<br /><br />
<br /><br />
<br /><br />
<br /><br />
<br /><br />
<br /><br />
<br /><br />
<br /><br />
<table border="0" class="ued_table_1">
  
  <!--list---------------------------->
  <tr>
    <td class="title" colspan="2">弹框 常用 <select><option>test</option></select></td>
  </tr>
  <tr>
    <td width="300"><p>示例1：</p>
      <div style="padding-left:50px"><a href="#foobar" title="点击" class="boxy">锚点#对应ID的内容(div#foobar)</a></div>
      <div id="foobar" style="padding:15px; display:none; background-color:#fff; font-size:2em; color:#000000; font-weight:bold;">这是一段ID为foobar的div标签内的文字</div></td>
    <td>
    <a href="javascript:void(0);" onClick="$(this).next().toggle()">[代码]</a>
<textarea class="ued_area_1" style="display:none;">
弹出层显示对应代码：
<div id="foobar" style="padding:15px; display:none; background-color:#cad5eb; font-size:2em; color:#000000; font-weight:bold;">这是一段ID为foobar的div标签内的文字</div>
js调用：
$(function(){
	$(".boxy").boxy();
}); 
</textarea>
	</td>
  </tr>
  <tr>
    <td width="300"><p>示例2：</p>
      <ul style="padding-left:50px">
        <li>弹出 - <a id="alert" href="javascript:void(0);">Boxy.alert</a> - 回调函数总是不被调用</li>
        <li>确认 - <a id="confirm" href="javascript:void(0);">Boxy.confirm</a> - 仅当用户选择了“确认”时回调函数会被调用</li>
      </ul></td>
    <td>
    <a href="javascript:void(0);" onClick="$(this).next().toggle()">[代码]</a>
<textarea class="ued_area_1" style="display:none;">
html:
<ul class="">
    <li>弹出 - <a id="alert" href="javascript:void(0);">Boxy.alert</a> - 回调函数总是不被调用</li>
    <li>确认 - <a id="confirm" href="javascript:void(0);">Boxy.confirm</a> - 仅当用户选择了“确认”时回调函数会被调用</li>
</ul>
弹出alert：
    js调用：
    $("#alert").click(function() {
        Boxy.alert("文件未找到", null, {title: "提示信息"});
        return false;
    });
弹出alert：
    js调用：
    $("#confirm").click(function() {
        Boxy.confirm("请确认:", function() { alert("已经确认!"); }, {title: "提示信息"});
        return false;
    }); 
</textarea>
	</td>
  </tr>
  <tr>
    <td width="300"><p>示例3：</p>
      <div style="padding-left:50px">
        <input id='curElement' type= 'button' value ='元素调用'/>
      </div>
      <div id='boxyConfirm' style='display:none;'>
        <div style="display: block;" class="boxy-content">
          <div class="question">请确认：</div>
          内容<br  />
          内容<br  />
          内容<br  />
          <input type="button" value="取消" class="boxy-btn2 close">
        </div>
      </div></td>
    <td>
    <a href="javascript:void(0);" onClick="$(this).next().toggle()">[代码]</a>
<textarea class="ued_area_1" style="display:none;">
<input id='curElement' type= 'button' value ='元素调用'/>
<div id='boxyConfirm' style='display:none;'>
<div style="display: block;" class="boxy-content">
	内容<br  />
    内容<br  />
    内容<br  />
    <input type="button" value="取消" class="boxy-btn2 close">
</div>
</textarea></td>
  </tr>
  <!--/list----------------------------> 
  <!--list---------------------------->
  <tr>
    <td class="title" colspan="2">弹框 异步</td>
  </tr>
  <tr>
    <td>demo1：
      <div style="padding-left:50px"> <a class="boxy" title="加载页面" href="test.html">远程内容(加载同文件夹下的test.html)</a> </div></td>
    <td><xmp> <a class="boxy" title="加载页面" href="test.html">远程内容(加载同文件夹下的test.html)</a> </xmp></td>
  </tr>
  <tr>
    <td>demo2：
      <div style="padding-left:50px">
        <button id="boxyLoad">元素调用</button>
      </div></td>
    <td>
<a href="javascript:void(0);" onClick="$(this).next().toggle()">[代码]</a>
<textarea class="ued_area_1" style="display:none;">
<button id="boxyLoad">元素调用</button>
<script>
$('#boxyLoad').click(function(){
	Boxy.load("test.html",{cache:false});
	return false;
});
</script> 
</textarea>
</td>
  </tr>
</table>


<a href="" onclick="test()">111111</a>
<script type="text/javascript">
function test(){
	new Boxy('<iframe frameborder="0" src="'+href+'" height="520" width="556"></iframe>',{title:"查看消息",modal:true});
}
</script>
<br />
<br /><br />
<br /><br />
<br /><br />
<br /><br />
<br /><br />
<br /><br />
<br /><br />
<br /><br />
<br /><br />
<br /><br />
<br /><br />
<br /><br />
<br /><br />
<br /><br />
<br /><br />
<br /><br />
<br /><br />
<br /><br />
<br /><br />
<br /><br />
<br /><br />
<br /><br />
<br /><br />
<br /><br />
<br /><br />
<br />
<br />
<br />
<br />
</body>
</html>